<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
</head>

<body>
    <button>显示播放视频</button>
    <div class="hidden">
        <video>
            <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
            <p>
                Your browser doesn't support HTML video. Here is a
                <a href="rabbit320.mp4">link to the video</a> instead.
            </p>
        </video>
    </div>
        <script>
            const butt = document.querySelector("button")
            const div = document.querySelector("div")
            const vid  = document.querySelector("video")

                butt.addEventListener("click",()=>{
                    console.log("点击播放按钮")
                    div.classList.remove("hidden")//移除元素隐藏
                });


                vid.addEventListener("click",(event)=>{
                    console.log("视频播放")
                    event.stopPropagation()
                    vid.play()//视频播放
                }); 


                div.addEventListener("dbclick",()=>{
                    console.log("隐藏视频")
                     div.classList.add("hidden")//隐藏视频
                })



      

        </script>

</body>

</html>
<style>
.hidden{
    visibility: hidden;
}


</style>